<template>
  <section class="add">
    <el-form ref="form" :model="form" label-width="90px">
      <el-form-item label="警号">
        <el-input v-model="form.studentId"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.studentName"></el-input>
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input v-model="form.tel"></el-input>
      </el-form-item>

      <el-form-item label="身份证号">
        <el-input v-model="form.cardId" placeholder="请输入18位身份证号"></el-input>
      </el-form-item>

      <!-- 性别：下拉框（自动填充） -->
      <el-form-item label="性别">
        <el-select v-model="form.sex" placeholder="自动识别或手动选择">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>

      <!-- 单位所在地：下拉框 -->
      <el-form-item label="单位所在地">
        <el-select v-model="form.institute" placeholder="请选择单位所在地" style="width: 100%;">
          <el-option label="南昌铁路公安处" value="南昌铁路公安处"></el-option>
          <el-option label="鹰潭铁路公安处" value="鹰潭铁路公安处"></el-option>
          <el-option label="赣州铁路公安处" value="赣州铁路公安处"></el-option>
          <el-option label="厦门铁路公安处" value="厦门铁路公安处"></el-option>
          <el-option label="福州铁路公安处" value="福州铁路公安处"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="专业">
        <el-input v-model="form.major"></el-input>
      </el-form-item>

      <el-form-item label="年度">
        <el-input v-model="form.grade"></el-input>
      </el-form-item>

      <el-form-item label="中队">
        <el-input v-model="form.clazz"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit()" icon="el-icon-a-07">立即创建</el-button>
        <el-button type="danger" icon="el-icon-a-022" @click="cancel()">取消</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
export default {
  data() {
    return {
      form: { // 表单数据初始化
        studentName: null,
        grade: null,
        major: null,
        clazz: null,
        institute: null,
        tel: null,
        email: null,
        pwd: 123456,
        cardId: null,
        sex: null,
        role: 2
      }
    };
  },
  watch: {
    // 监听身份证号输入
    'form.cardId'(val) {
      val = val ? val.trim() : '';

      // 不是18位时不处理
      if (!val || val.length !== 18) {
        this.form.sex = null;
        return;
      }

      // 简单验证身份证格式（前17位数字，最后一位数字或X）
      const idRegex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/;
      if (!idRegex.test(val)) {
        this.$message.warning('身份证格式不正确');
        this.form.sex = null;
        return;
      }

      // 获取第17位（索引16），判断奇偶
      const seventhTeen = parseInt(val.charAt(16));
      this.form.sex = seventhTeen % 2 === 1 ? '男' : '女';

      this.$message.success('已根据身份证自动识别性别');
    }
  },
  methods: {
    onSubmit() { // 数据提交
      this.$axios({
        url: '/api/student',
        method: 'post',
        data: {
          ...this.form
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: '数据添加成功',
            type: 'success'
          });
          this.$router.push({ path: '/studentManage' });
        }
      });
    },
    cancel() { // 取消按钮
      this.form = {};
    }
  }
};
</script>

<style lang="less" scoped>
.add {
  padding: 0px 40px;
  width: 400px;
}
</style>